<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item><el-button size="small" type="primary" @click="shaixuan = !shaixuan">筛选</el-button></el-form-item>
      <el-form-item><el-button size="small" type="primary" @click="exportBtn()">导出</el-button></el-form-item>
      <el-form-item><el-button size="small" type="primary" @click="dayin2()">打印</el-button></el-form-item>

      <el-form-item>
        <el-radio-group @change="getDataList()" v-model="dataForm.selDateAdd" size="small">
          <!-- <el-radio-button label="全部"></el-radio-button> -->
          <el-radio-button label="今日"></el-radio-button>
          <el-radio-button label="昨日"></el-radio-button>
          <el-radio-button label="本周"></el-radio-button>
          <el-radio-button label="其他"></el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="dataForm.selDateAdd == '其他'">
        <el-date-picker size="small" @change="getDataList()" v-model="dataForm.startDate" value-format="timestamp" type="date" placeholder="开始日期"></el-date-picker>
        <el-date-picker size="small" @change="getDataList()" v-model="dataForm.endDate" value-format="timestamp" type="date" placeholder="结束日期"></el-date-picker>
      </el-form-item>

      <el-form-item style="float: right;" label="" v-if="isAuth('hotel:hotelseller:list')">
        <el-select
          multiple
          collapse-tags
          clearable
          style="width:180px;"
          v-model="sellerIds"
          filterable
          remote
          reserve-keyword
          @change="selectSeller"
          placeholder="商家名称"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option v-for="item in platformSeller" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- <el-button @click="getDataList()">{{ $t('Common.Query') }}</el-button> -->
        <!-- <el-button v-if="isAuth('hotel:thotelmembercardrecord:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('Common.Insert') }}</el-button> -->
        <el-button size="small" v-if="isAuth('hotel:thotelmembercardrecord:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">
          批量删除
        </el-button>
      </el-form-item>
    </el-form>

    <el-collapse-transition>
      <div v-show="shaixuan">
        <el-form :model="dataForm" @keyup.enter.native="getDataList()" label-width="120px">
          <el-form-item label="办卡信息"><el-input style="width:220px;" v-model="dataForm.key" placeholder="会员卡号/姓名/手机号/证件号" clearable></el-input></el-form-item>
          <el-form-item label="推荐员工">
            <el-input style="width:220px;" v-model="dataForm.salesman" placeholder="推荐员工" clearable></el-input>
          </el-form-item>
          <el-form-item label="办卡来源">
            <el-radio-group v-model="dataForm.source">
              <el-radio-button v-for="item in typeOp" :key="item.id" :label="item.value">{{ item.label }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="支付方式">
            <el-radio-group v-model="dataForm.payType">
              <el-radio-button v-for="item in payOp" :key="item.id" :label="item.value">{{ item.label }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="操作员">
            <el-select v-model="dataForm.executeUserId" filterable placeholder="请选择">
              <el-option :label="'全部'" :value="null"></el-option>
              <el-option v-for="item in executeUserIdOp" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-delete" @click="clearShaiXuan">清空筛选</el-button>
            <el-button type="primary" icon="el-icon-search" @click="getDataList()">{{ $t('Common.Query') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-collapse-transition>

    <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
      <el-table-column prop="sellerName" header-align="center" align="center" label="商家" width="180"></el-table-column>
      <!-- <el-table-column prop="id" header-align="center" align="center" label="id"></el-table-column> -->
      <el-table-column prop="memberName" header-align="center" align="center" label="用户" width="200"></el-table-column>
      <!-- <el-table-column prop="certificate" header-align="center" align="center" label="证件类型"></el-table-column> -->
      <el-table-column prop="name" header-align="center" align="center" label="名字"></el-table-column>
      <el-table-column prop="mobile" header-align="center" align="center" label="手机" width="150"></el-table-column>
      <el-table-column prop="certificateNo" header-align="center" align="center" label="证件号" width="200"></el-table-column>
      <el-table-column prop="levelName" header-align="center" align="center" label="等级类型"></el-table-column>
      <el-table-column prop="cardNo" header-align="center" align="center" label="卡号" width="200"></el-table-column>
      <el-table-column prop="payType" header-align="center" align="center" label="支付类型" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.payType == 0">现金</span>
          <span v-if="scope.row.payType == 1">微信</span>
          <span v-if="scope.row.payType == 2">支付宝</span>
          <span v-if="scope.row.payType == 3">银行卡</span>
          <span v-if="scope.row.payType == 4">其他</span>
        </template>
      </el-table-column>
      <el-table-column prop="payMoney" header-align="center" align="center" label="支付金额" width="100"></el-table-column>
      <!-- <el-table-column prop="gender" header-align="center" align="center" label="性别"></el-table-column> -->
      <!-- <el-table-column prop="address" header-align="center" align="center" label="联系地址"></el-table-column> -->
      <el-table-column prop="creator" header-align="center" align="center" label="操作员"></el-table-column>
      <el-table-column prop="createDate" header-align="center" align="center" label="创建时间" width="200"></el-table-column>
      <el-table-column prop="salesman" header-align="center" align="center" label="推荐员工"></el-table-column>
      <el-table-column prop="source" header-align="center" align="center" label="来源"></el-table-column>
      <!--      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <iframe id="print-iframe" style="display: none;"></iframe>

    <div style="float: left;margin-top: 20px;">
      <span>金额合计：</span>
      <span>{{ parseFloat(countMoney).toFixed(2) }}元</span>
    </div>

    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import moment from 'moment';
import AddOrUpdate from './thotelmembercardrecord-add-or-update';
export default {
  data() {
    return {
      loading: false,
      shaixuan: false,
      executeUserIdOp: [],
      dataForm: {
        key: '',
        startDate: '',
        salesman: '',
        endDate: '',
        type: null,
        payType: null,
        state: null,
        selDateAdd: '今日',
        source: null,
        executeUserId: null
      },
      typeOp: [
        {
          label: '全部',
          value: null
        },
        {
          label: '线上',
          value: '线上'
        },
        {
          label: '线下',
          value: '线下'
        }
      ],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      sellerIds: [],
      platformSeller: [],
      tableHeader: [
        { name: '商家', field: 'sellerName' },
        { name: '用户', field: 'memberName' },
        { name: '姓名', field: 'memberZSName' },
        { name: '手机号', field: 'memberTel' },
        { name: '证件号', field: 'memberCertificateNo' },
        { name: '会员卡号', field: 'cardNo' },
        { name: '等级类型', field: 'levelName' },
        { name: '支付方式', field: 'payType' },
        { name: '支付金额', field: 'payMoney' },
        { name: '操作员', field: 'creator' },
        { name: '办卡时间', field: 'createDate' },
        { name: '推荐员工', field: 'salesman' },
        { name: '来源', field: 'source' }
      ],
      // 支付方式（0现金1微信支付2支付宝支付3银行卡4其他）
      payOp: [
        {
          label: '全部',
          value: null
        },
        {
          label: '现金',
          value: 0
        },
        {
          label: '微信',
          value: 1
        },
        {
          label: '支付宝',
          value: 2
        },
        {
          label: '银行卡',
          value: 3
        },
        {
          label: '其他',
          value: 4
        }
      ],
      countMoney: 0
    };
  },
  components: {
    AddOrUpdate
  },
  activated() {
    this.getDataList();
    this.remoteMethod();
    this.getExecuteUserId();
  },
  methods: {
    //清空筛选
    clearShaiXuan() {
      Object.assign(this.dataForm, this.$options.data().dataForm)
      this.getDataList();
    },
    //导出
    exportBtn() {
      window.open(this.$http.adornUrl(`/hotel/thotelmembercardrecord/excel_export`));
    },
    dayin2() {
      var style = [
        '<style>',
        'body{font-size: 12px; color: #666;}',
        'table{width: 100%; border-collapse: collapse; border-spacing: 0;}',
        'th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;}',
        'a{color: #666; text-decoration:none;}',
        '*.layui-hide{display: none}',
        '</style>'
      ].join('');
      //头部html
      var table = '<table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width:100%;"><thead class="has-gutter"><tr class="">';
      table += '<th style="text-align:center;line-height:38px;font-size:20px;font-weight:bold;" colspan="13" >办卡明细</th>';

      table += '</tr><tr class="">';
      this.tableHeader.forEach((item, index) => {
        table += '<th colspan="1" rowspan="1" class="el-table_1_column_2  is-center is-leaf"><div class="cell">' + item.name + '</div></th>';
      });
      table += '</tr></thead><tbody>';
      //身体
      this.dataList.forEach((item, index) => {
        table += '<tr class=""><td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.sellerName + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.memberName + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.name + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.mobile + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.certificateNo + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.cardNo + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.levelName + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + this.payType(item.payType) + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.payMoney + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.creator + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.createDate + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.salesman + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.source + '</span></div>' + '</td>';
        table += '</tr>';
      });

      table += '</tbody></table>';
      table +=
        '<div style="width: 100%;text-align: right;">' +
        '<span style="margin-right: 20px;">打印时间：' +
        this.moment(new Date()) +
        '</span>' +
        '<span>打印人：' +
        this.$store.state.user.name +
        '</span>' +
        '</div>';

      var iframe = document.getElementById('print-iframe');
      var doc = null;
      document.body.appendChild(iframe);
      doc = iframe.contentWindow.document;
      doc.write(style + table);
      doc.close();
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      if (navigator.userAgent.indexOf('MSIE') > 0) {
        document.body.removeChild(iframe);
      }
    },
    moment(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss');
    },
    payType(payType) {
      if (payType === "0") {
          return '现金';
      }
      if (payType === "1") {
          return '微信';
      }
      if (payType === "2") {
          return '支付宝';
      }
      if (payType === "3") {
          return '银行卡';
      }
      if (payType === "4") {
          return '其他';
      }
    },
    selectSeller(id, value) {
      this.getDataList();
      this.getExecuteUserId();
    },
    //加载操作员
    getExecuteUserId() {
      var ids = '';
      if (this.sellerIds) {
        this.sellerIds.forEach((item, index) => {
          ids += item + ',';
        });
        ids = ids.substring(0, ids.length - 1);
      }
      this.$http({
        url: this.$http.adornUrl('/hotel/hotelselleremployee/executeList'),
        method: 'get',
        params: this.$http.adornParams({
          ids: ids
        })
      }).then(({ data }) => {
        this.loading = false;
        if (data && data.code === 0) {
          this.executeUserIdOp = data.page.list;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //加载平台商家数据
    remoteMethod(query) {
      if (this.isAuth('hotel:hotelseller:list')) {
        this.loading = true;
        this.$http({
          url: this.$http.adornUrl("/hotel/hotelseller/platformSeller"),
          method: "get",
          params: this.$http.adornParams({
            sellerName: query
          })
        }).then(({ data }) => {
          this.loading = false;
          if (data && data.code === 0) {
            this.platformSeller = data.page.list;
          } else {
            this.$message.error(data.msg);
          }
        });
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      var ids = '';
      if (this.sellerIds) {
        this.sellerIds.forEach((item, index) => {
          ids += item + ',';
        });
        ids = ids.substring(0, ids.length - 1);
      }
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelmembercardrecord/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          ...this.dataForm,
          ids: ids
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.records;
          this.totalPage = data.page.total;
          this.countMoney = 0;
          this.dataList.forEach((item, index) => {
            this.countMoney += item.payMoney;
          });
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.id;
          });
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelmembercardrecord/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: this.$t('Common.OperationSuccessful'),
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    }
  }
};
</script>
